<template>
    <div class="m-25 mt-65">
        <div class="normal-box-mod">
            <div class="normal-box-hd clearfix">
                <div class="normal-box-title">
                    <div class="decorate-square"></div>
                    <h2>领袋次数充值规则</h2>
                </div>
            </div>
            <div class="normal-box-bd">
                <div class="normal-list-page-mod">
                  <div class="mb-2">
                    <Button-group>
                      <Button custom-icon="iconfont icon-shanchusekuai" size="small" type="error" @click="batchDel">
                        删除
                      </Button>
                      <Button custom-icon="iconfont icon-fangkuai2" size="small" type="primary" @click="showCreateModal">
                        新建
                      </Button>
                    </Button-group>
                  </div>
                    <div class="normal-list-page-bd">
                        <Table border :loading="list.loading" :columns="list.columns" :data="list.tableData" @on-selection-change="selectionChange"></Table>
                    </div>
                    <div class="normal-list-page-ft clearfix">
                      <Page class="fr" :total="queryData.totalRecord" :page-size="queryData.pageSize" :current="queryData.page"
                            @on-change="changePage" @on-page-size-change="onPageSizeChange" show-elevator show-total
                            show-sizer></Page>
                    </div>
                </div>

                <!--新建&修改-->
                <Modal v-model="modal.ckPaybagRules.isShow" :loading="modal.ckPaybagRules.loading" :mask-closable="false" :title="modal.ckPaybagRules.title" @on-ok="postData">
                    <Form ref="systemFrom" :model="modal.ckPaybagRules.formData" :rules="modal.ckPaybagRules.rules" :label-width="120">
                        <FormItem label="金额（分）"  prop="money">
                            <Input placeholder="请输入金额（分）" v-model="modal.ckPaybagRules.formData.money" style="width:300px;"/>
                        </FormItem>
                        <FormItem label="领袋次数"  prop="count">
                            <Input placeholder="请输入领袋次数" v-model="modal.ckPaybagRules.formData.count" style="width:300px;"/>
                        </FormItem>
                    </Form>
                </Modal>
            </div>
        </div>
    </div>
</template>
<script>
import CkPaybagRulesApi from '@/api/bill/ckPaybagRules.js'
import { Message } from 'iview'

export default {
  name: 'ckPaybagRules',
  data () {
    return {
      // 弹出层数据
      modal: {
        ckPaybagRules: {
          isShow: false,
          loading: true,
          type: 'create', // create 新建，update 修改
          title: '新建',
          rules: { // check
            money: [{ required: true, message: '请填写金额', trigger: 'blur' }],
            count: [{ required: true, message: '请填写领袋次数', trigger: 'blur' }]
          },
          formData: {}
        }
      },
      // 列表
      list: {
        loading: false,
        selections: [],
        // 列表展示数据
        tableData: [],
        // 表格表头
        columns: [
          {
            type: 'selection',
            minWidth: 10,
            align: 'center'
          },
          /** 开始自动生成 */
          { title: 'id',
            key: 'id',
            minWidth: 60,
            align: 'center'
          },
          { title: '金额（分）',
            minWidth: 60,
            key: 'money',
            align: 'center'
          },
          { title: '领袋次数',
            minWidth: 60,
            key: 'count',
            align: 'center'
          },
          {
            title: '添加时间',
            minWidth: 120,
            key: 'createTime',
            align: 'center'
          },
          {
            title: '修改时间',
            minWidth: 120,
            key: 'updateTime',
            align: 'center'
          },
          /** 自动生成结束 */
          {
            title: '操作',
            align: 'center',
            minWidth: 150,
            fixed: 'right',
            render: (h, params) => {
              return h('div', { class: 'action-group' }, [
                h(
                  'Tooltip',
                  {
                    props: {
                      placement: 'left',
                      content: '编辑'
                    },
                    style: {
                      cursor: 'pointer'
                    }
                  },
                  [
                    h(
                      'Button',
                      {
                        props: {
                          type: 'primary',
                          size: 'small'
                        },
                        style: {
                          marginRight: '5px',
                          padding: '1px 2px'
                        },
                        on: {
                          click: () => {
                            // this.showUpdateModal(params.index);
                            this.showUpdateModal(params.row.id)
                          }
                        }
                      },
                      [
                        h('Icon', {
                          props: {
                            type: ' iconfont icon-bianjisekuai',
                            size: 18
                          }
                        })
                      ]
                    )
                  ]
                ),

                h(
                  'Tooltip',
                  {
                    props: {
                      placement: 'right',
                      content: '删除'
                    },
                    style: {
                      cursor: 'pointer'
                    }
                  },
                  [
                    h(
                      'Button',
                      {
                        props: {
                          type: 'error',
                          size: 'small'
                        },
                        style: {
                          marginRight: '5px',
                          padding: '1px 2px'
                        },
                        on: {
                          click: () => {
                            this.delData([params.row.id])
                          }
                        }
                      },
                      [
                        h('Icon', {
                          props: {
                            type: ' iconfont icon-shanchusekuai',
                            size: 18
                          }
                        })
                      ]
                    )
                  ]
                )
              ])
            }
          }
        ]
      },
      // 页面查询数据
      queryData: {
        limit: 10,
        page: 1,
        totalRecord: 0,
        name: ''
      }
    }
  },
  methods: {
    // 获取列表
    getTableData () {
      const that = this
      that.queryData.totalRecord = undefined
      CkPaybagRulesApi.getPageList(that.queryData)
        .then(res => {
          that.list.tableData = res.data.list
          that.queryData.totalRecord = res.data.totalRecord
          that.queryData.page = res.data.pageNum
          that.queryData.limit = res.data.pageSize
        })
        .catch(error => {
          Message.error(error)
        })
    },

    // 新建&修改
    postData () {
      const that = this
      that.$refs['systemFrom'].validate(valid => {
        if (valid) {
          if (!that.modal.ckPaybagRules.formData.id) { // 新建
            CkPaybagRulesApi.add(that.modal.ckPaybagRules.formData)
              .then(res => {
                that.modal.ckPaybagRules.isShow = false
                that.modal.ckPaybagRules.loading = false
                if (!res.code) {
                  that.getTableData()
                  that.$Notice.success({
                    title: '保存成功!'
                  })
                } else {
                  that.$Notice.error({
                    title: res.message
                  })
                }
              })
              .catch(error => {
                Message.error(error)
              })
          } else { // 修改
            CkPaybagRulesApi.update(that.modal.ckPaybagRules.formData)
              .then(res => {
                that.modal.ckPaybagRules.isShow = false
                that.modal.ckPaybagRules.loading = false
                if (!res.code) {
                  that.getTableData()
                  that.$Notice.success({
                    title: '保存成功!'
                  })
                } else {
                  that.$Notice.error({
                    title: res.message
                  })
                }
              })
              .catch(error => {
                Message.error(error)
              })
          }
        } else {
          that.modal.ckPaybagRules.loading = false
          that.$nextTick(() => {
            that.modal.ckPaybagRules.loading = true
          })
        }
      })
    },

    // 删除
    delData (ids) {
      if (!ids.length) {
        return
      }
      this.$Modal.confirm({
        title: '确认删除',
        content:
                    '<p>您确认删除id为 <strong>' +
                    ids.toString() +
                    '</strong> 的记录吗?</p><p>删除后将无法撤销，请谨慎操作！</p>',
        loading: true,
        onOk: () => {
          CkPaybagRulesApi.del({
            ids: ids
          }).then(res => {
            this.$Modal.remove()
            if (!res.code) {
              this.$Notice.success({
                title: '删除成功'
              })
              this.queryData.page = 1
              this.getTableData()
            } else {
              this.$Notice.error({
                title: res.message
              })
            }
          })
        }
      })
    },

    // 排量删除
    batchDel () {
      let ids = []
      this.list.selections.forEach(element => {
        ids.push(element.id)
      })
      if (!ids.length) {
        this.$Message.error({
          content: '请先选择要删除的项！',
          duration: 3
        })
      }
      this.delData(ids)
    },

    // 全选，不全选
    selectionChange (args) {
      this.list.selections = args
    },

    // 每页显示记录数变更
    onPageSizeChange (pageSize) {
      this.queryData.limit = pageSize
      this.getTableData()
    },

    // 换页
    changePage (page) {
      this.queryData.page = page
      this.getTableData()
    },

    // 显示新建弹窗
    showCreateModal () {
      this.modal.ckPaybagRules.type = 'create'
      this.modal.ckPaybagRules.title = '新建'
      this.modal.ckPaybagRules.formData = {}
      this.modal.ckPaybagRules.isShow = true
    },

    // 显示修改弹窗
    showUpdateModal (id) {
      this.modal.ckPaybagRules.type = 'update'
      this.modal.ckPaybagRules.title = '修改'
      // 不请求后端，直接list取对象
      // this.modal.ckPaybagRules.formData = JSON.parse(
      //   JSON.stringify(this.list.tableData)
      // )[index];
      const that = this
      CkPaybagRulesApi.getDetail(id).then(res => {
        that.modal.ckPaybagRules.formData = res.data
      })
        .catch(error => {
          Message.error(error)
        })
      this.modal.ckPaybagRules.isShow = true
    },
    // 查询
    inQuire () {
      const that = this
      that.queryData.page = 1
      that.getTableData()
    }
  },

  created () {
    this.getTableData()
  }
}
</script>
